<template>
  <view class="w-[750rpx] bg-gray-50 min-h-screen pgs">
    <!-- Header -->
    <PageHeader title="发布签到任务" />

    <!-- Content -->
    <view class="p-[40rpx]">
      <nut-form ref="formRef" :model-value="formData">
        <!-- 任务标题 -->
        <view class="mb-[40rpx] bg-white rounded-[16rpx] p-[30rpx] shadow-sm">
          <view class="text-[32rpx] font-semibold mb-[16rpx] text-gray-800"> 任务标题 <text class="text-red-500">*</text> </view>
          <nut-input v-model="formData.title" placeholder="例如：每日健康打卡" class="w-full" />
        </view>

        <!-- 任务描述 -->
        <view class="mb-[40rpx] bg-white rounded-[16rpx] p-[30rpx] shadow-sm">
          <view class="text-[32rpx] font-semibold mb-[16rpx] text-gray-800">任务描述</view>
          <nut-textarea v-model="formData.description" placeholder="描述签到任务的具体内容和要求..." rows="4" />
          <view class="text-[26rpx] text-gray-500 mt-[10rpx]">建议详细说明签到规则和要求</view>
        </view>

        <!-- 时间设置 -->
        <view class="bg-white rounded-[16rpx] p-[30rpx] shadow-sm mb-[40rpx]">
          <view class="text-[36rpx] font-semibold mb-[30rpx] pb-[16rpx] border-b border-gray-200 text-blue-500 flex items-center">
            <!-- <IconFont name="time" size="16" class="mr-[10rpx]"></IconFont> -->
            时间设置
          </view>

          <!-- 开始和结束日期 -->
          <view class="flex gap-[30rpx] mb-[40rpx]">
            <view class="flex-1">
              <view class="text-[32rpx] font-semibold mb-[16rpx] text-gray-800"> 开始日期 <text class="text-red-500">*</text> </view>
              <view @click="showStartDatePicker = true" class="p-[28rpx] border border-gray-300 rounded-[16rpx] text-[30rpx] bg-[#f0f0f0] active:bg-gray-50 transition-colors cursor-pointer">
                <text :class="formData.startDate ? 'text-gray-800' : 'text-gray-400'">
                  {{ formData.startDate || "请选择开始日期" }}
                </text>
              </view>
            </view>
            <view class="flex-1">
              <view class="text-[32rpx] font-semibold mb-[16rpx] text-gray-800">结束日期</view>
              <view @click="showEndDatePicker = true" class="p-[28rpx] border border-gray-300 rounded-[16rpx] text-[30rpx] bg-[#f0f0f0] active:bg-gray-50 transition-colors cursor-pointer">
                <text :class="formData.endDate ? 'text-gray-800' : 'text-gray-400'">
                  {{ formData.endDate || "请选择结束日期" }}
                </text>
              </view>
              <view class="text-[26rpx] text-gray-500 mt-[10rpx]">留空表示长期有效</view>
            </view>
          </view>

          <!-- 每日签到时间段 -->
          <view class="mb-[40rpx]">
            <view class="text-[32rpx] font-semibold mb-[16rpx] text-gray-800"> 每日签到时间段 <text class="text-red-500">*</text> </view>
            <view class="flex gap-[30rpx]">
              <view
                @click="showStartTimePicker = true"
                class="flex-1 p-[28rpx] border border-gray-300 rounded-[16rpx] text-[30rpx] bg-[#f0f0f0] active:bg-gray-50 transition-colors cursor-pointer text-center"
              >
                <text :class="formData.startTime ? 'text-gray-800' : 'text-gray-400'">
                  {{ formData.startTime || "开始时间" }}
                </text>
              </view>
              <view class="flex items-center justify-center text-gray-400 text-[24rpx]">至</view>
              <view
                @click="showEndTimePicker = true"
                class="flex-1 p-[28rpx] border border-gray-300 rounded-[16rpx] text-[30rpx] bg-[#f0f0f0] active:bg-gray-50 transition-colors cursor-pointer text-center"
              >
                <text :class="formData.endTime ? 'text-gray-800' : 'text-gray-400'">
                  {{ formData.endTime || "结束时间" }}
                </text>
              </view>
            </view>
            <view class="text-[26rpx] text-gray-500 mt-[10rpx]">设置每天允许签到的时间范围</view>
          </view>
        </view>

        <!-- 签到地址设置 -->
        <view class="bg-white rounded-[16rpx] p-[30rpx] shadow-sm mb-[40rpx]">
          <view class="text-[36rpx] font-semibold mb-[30rpx] pb-[16rpx] border-b border-gray-200 text-blue-500 flex items-center">
            <!-- <IconFont name="location" size="16" class="mr-[10rpx]"></IconFont> -->
            签到地址设置
          </view>

          <view class="mb-[40rpx]">
            <view class="text-[32rpx] font-semibold mb-[16rpx] text-gray-800"> 签到位置 <text class="text-red-500">*</text> </view>
            <nut-input v-model="formData.address.detail" placeholder="输入或选择签到地点" class="w-full !my-[10rpx]" />
            <nut-button type="primary" size="small" @click="selectLocation" class="w-full flex-center !my-[10rpx]" style="display: flex; align-items: center">
              <template #icon>
                <IconFont name="location" size="14" class="mr-[10rpx]"></IconFont>
              </template>
              <text>选择位置</text>
            </nut-button>

            <!-- 地址详情 -->
            <view class="bg-white border border-gray-200 rounded-[16rpx] mt-[30rpx] shadow-sm">
              <!-- <view class="mb-[30rpx]">
                <view class="text-[32rpx] font-semibold mb-[16rpx] text-gray-800">详细地址</view>
                <nut-input v-model="formData.address.detail" placeholder="请输入详细地址" class="w-full" />
              </view> -->

              <view class="mb-[30rpx]">
                <view class="text-[32rpx] font-semibold mb-[16rpx] text-gray-800">位置坐标</view>
                <view class="flex gap-[30rpx]">
                  <nut-input v-model="formData.address.lat" placeholder="纬度" class="flex-1" />
                  <nut-input v-model="formData.address.lng" placeholder="经度" class="flex-1" />
                </view>
                <view class="text-[26rpx] text-gray-500 mt-[10rpx]">可手动输入或通过选择位置自动填入</view>
              </view>

              <view class="mb-[30rpx]">
                <view class="text-[32rpx] font-semibold mb-[16rpx] text-gray-800">位置预览</view>
                <div
                  class="h-[300rpx] bg-gradient-to-br from-blue-50 to-gray-100 rounded-[12rpx] flex items-center justify-center text-gray-500 border-2 border-dashed border-gray-300"
                  id="map-container"
                >
                  <view class="text-center" v-if="!formData.address.lng">
                    <IconFont name="location" size="24" class="mb-[10rpx] text-blue-400"></IconFont>
                    <view class="text-[28rpx]">位置地图预览</view>
                    <view class="text-[24rpx] mt-[5rpx]">选择位置后显示地图</view>
                  </view>
                </div>
              </view>

              <view>
                <view class="text-[32rpx] font-semibold mb-[16rpx] text-gray-800">签到范围（米）</view>
                <nut-input v-model="formData.address.range" type="number" placeholder="10" class="w-full" />
                <view class="text-[26rpx] text-gray-500 mt-[10rpx]">设置允许签到的最大距离范围，建议5-10米</view>
              </view>
            </view>
          </view>
        </view>

        <!-- 任务金额设置 -->
        <view class="bg-white rounded-[16rpx] p-[30rpx] shadow-sm mb-[40rpx]">
          <view class="text-[36rpx] font-semibold mb-[30rpx] pb-[16rpx] border-b border-gray-200 text-blue-500 flex items-center">
            任务设置
          </view>

          <view class="mb-[40rpx]">
            <view class="text-[32rpx] font-semibold mb-[16rpx] text-gray-800"> 签到人数 <text class="text-red-500">*</text> </view>
            <view class="flex gap-[20rpx] items-center">
              <nut-input v-model="formData.number" type="number" placeholder="请输入签到人数" class="flex-1" />
            </view>
          </view>


          <view class="mb-[40rpx]">
            <view class="text-[32rpx] font-semibold mb-[16rpx] text-gray-800"> 任务金额 <text class="text-red-500">*</text> </view>
            <view class="flex gap-[20rpx] items-center">
              <nut-input v-model="formData.amount" type="number" placeholder="请输入任务金额" class="flex-1" />
              <view class="w-[80rpx] p-[20rpx] border border-blue-200 rounded-[16rpx] text-[30rpx] text-center bg-blue-50 text-blue-600 font-semibold"> 元 </view>
            </view>
            <view class="text-[26rpx] text-gray-500 mt-[10rpx]">设置完成此签到任务可获得的金额奖励</view>
          </view>

        </view>

        <!-- 区域选择 -->
        <RegionSelector 
          v-model="regionLevel"
          @change="handleRegionChange"
        />

        <!-- 金额总计 -->
        <view class="flex justify-between items-center mt-4">
          <text class="text-[32rpx] font-bold text-gray-800">支付金额</text>
          <text class="text-[48rpx] font-bold text-red-500">¥ {{ totalAmount }}</text>
        </view>

        <!-- 提交按钮 -->
        <view class="mt-[60rpx] pb-[40rpx]">
          <nut-button 
            type="primary" 
            size="large" 
            @click="submitForm" 
            :disabled="isSubmitting"
            :loading="isSubmitting"
            class="w-full h-[100rpx] text-[36rpx] font-semibold rounded-[20rpx] shadow-lg"
          > 
            {{ isSubmitting ? "发布中..." : "支付任务金额并发布" }}
          </nut-button>
          <text class="text-[26rpx] text-gray-600 mt-[30rpx] block text-center"> 支付后金额将托管在平台，任务完成后支付给执行方 </text>
        </view>
      </nut-form>
    </view>

    <!-- 日期选择器 -->
    <nut-calendar v-model:visible="showStartDatePicker" v-model="startDateValue" title="选择开始日期" @choose="onStartDateConfirm" @close="showStartDatePicker = false" />

    <nut-calendar v-model:visible="showEndDatePicker" v-model="endDateValue" title="选择结束日期" @choose="onEndDateConfirm" @close="showEndDatePicker = false" />

    <!-- 时间选择器 -->
    <nut-popup v-model:visible="showStartTimePicker" position="bottom" round>
      <nut-picker v-model:visible="showStartTimePicker" v-model="startTimeValue" :columns="timeColumns" title="选择开始时间" @confirm="onStartTimeConfirm" />
    </nut-popup>

    <nut-popup v-model:visible="showEndTimePicker" position="bottom" round>
      <nut-picker v-model="endTimeValue" :columns="timeColumns" title="选择结束时间" @confirm="onEndTimeConfirm" />
    </nut-popup>

    <!-- 支付方式选择弹窗 -->
    <PaymentMethodModal 
      v-model="showPaymentModal" 
      :amount="parseFloat(totalAmount)"
      @confirm="handlePaymentConfirm"
      @cancel="handlePaymentCancel"
    />
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from "vue";
import Taro from "@tarojs/taro";
import { IconFont } from "@nutui/icons-vue-taro";
import PageHeader from "@/components/PageHeader.vue";
import RegionSelector from "@/components/RegionSelector.vue";
import PaymentMethodModal from "@/components/PaymentMethodModal.vue";
import { post } from "../../utils/request";
import { useUserStore } from "@/store/user";
import { storeToRefs } from "pinia";

const userStore = useUserStore();
const { locationObj } = storeToRefs(userStore);

// 表单数据
const formData = reactive({
  title: "",
  description: "",
  startDate: "",
  endDate: "",
  startTime: "",
  endTime: "",
  address: {
    name: "",
    detail: "",
    lat: "",
    lng: "",
    range: "10",
  },
  amount: "",
  number: 1,
});

// 区域选择（参考招聘页面统一实现）
const regionLevel = ref("city");
const fee = ref<string>("1");
const rangeType = ref<string>("1");
const isSubmitting = ref(false); // 添加提交状态

// 支付方式选择弹窗相关
const showPaymentModal = ref(false);
const currentTaskId = ref<number | null>(null);
const handleRegionChange = (data: { value: string; fee: number; range: string }) => {
  fee.value = String(data.fee);
  rangeType.value = data.range;
};

// 计算总金额（信息费 + 任务金额 × 人数）
const totalAmount = computed(() => {
  const taskAmount = parseFloat(formData.amount) || 0;
  const personCount = parseInt(String(formData.number)) || 1;
  const infoFee = parseFloat(fee.value) || 0;
  return (infoFee + taskAmount * personCount).toFixed(2);
});

// 选择器显示状态
const showStartDatePicker = ref(false);
const showEndDatePicker = ref(false);
const showStartTimePicker = ref(false);
const showEndTimePicker = ref(false);

// 选择器值
const startDateValue = ref<string>("");
const endDateValue = ref<string>("");
const startTimeValue = ref<string[]>(["09", "00"]);
const endTimeValue = ref<string[]>(["18", "00"]);

// 时间选择器列数据
const timeColumns = ref([
  // 小时列
  Array.from({ length: 24 }, (_, i) => ({
    text: String(i).padStart(2, "0"),
    value: String(i).padStart(2, "0"),
  })),
  // 分钟列
  Array.from({ length: 60 }, (_, i) => ({
    text: String(i).padStart(2, "0"),
    value: String(i).padStart(2, "0"),
  })),
]);

// 返回上一页（保留以备后用）
// const goBack = () => {
//   Taro.navigateBack();
// };

// 日期确认
const onStartDateConfirm = (date: string) => {
  console.log("date", date);
  formData.startDate = date[3];
  showStartDatePicker.value = false;
};

const onEndDateConfirm = (date: string) => {
  console.log("date", date);
  formData.endDate = date[3];
  showEndDatePicker.value = false;
};

// 时间确认
const onStartTimeConfirm = () => {
  formData.startTime = `${startTimeValue.value[0]}:${startTimeValue.value[1]}`;
  showStartTimePicker.value = false;
};

const onEndTimeConfirm = () => {
  formData.endTime = `${endTimeValue.value[0]}:${endTimeValue.value[1]}`;
  showEndTimePicker.value = false;
};

// 创建 MultiMarker 图层（修复图标设置）
let multiMarker: any = null;
let map: any = null;
let markers: any[] = [];

// 初始化地图
function initMap(lat: any, lng: any) {
  // 确保地图容器存在
  const mapContainer = document.getElementById("map-container");
  if (!mapContainer) {
    console.error("地图容器不存在，请检查DOM元素");
    return;
  }

  map = new (window as any).TMap.Map("map-container", {
    center: new (window as any).TMap.LatLng(lat, lng),
    zoom: 13,
    pitch: 50,
    styleId: "style1",
  });

  // 创建 MultiMarker 图层（修复图标设置）
  multiMarker = new (window as any).TMap.MultiMarker({
    map: map,
    styles: {
      default: new (window as any).TMap.MarkerStyle({
        width: 30, // 图标宽度
        height: 30, // 图标高度
        anchor: { x: 0.5, y: 1 }, // 锚点位置（图标底部中心）
        // src: "https://www.h5.nl9555.com/share.png", // 图标URL
        src: "https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/marker.png", // 图标URL
        // 添加容错图标，当主图标加载失败时显示
        fallbackSrc: "https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/marker.png",
      }),
    },
    geometries: [],
  });

  // 验证图标URL是否有效
  const testImg = new Image();
  testImg.src = "https://www.h5.nl9555.com/share.png";
  testImg.onerror = () => console.error("标记图标URL无效或无法访问");

  map.on("click", handleMapClick);
}

// 处理地图点击事件（优化版）
async function handleMapClick(e: any) {
  clearMarkers(); // 清除已有标记
  const position = e.latLng;

  // showLoading();
  try {
    const lat = position.getLat();
    const lng = position.getLng();

    // 创建新标记数据
    const newMarker = {
      id: `marker_${Date.now()}`, // 唯一ID
      styleId: "default", // 使用预定义的样式
      position: new (window as any).TMap.LatLng(lat, lng),
    };

    // 添加到标记数组
    markers.push(newMarker);

    // 更新图层显示新标记
    multiMarker.setGeometries(markers);
    console.log(multiMarker.getGeometries());

    // 获取地址信息
    const addressInfo: any = await userStore.getAddressInfo(lat, lng);
    // 更新地址信息
    formData.address.name = addressInfo.address;
    formData.address.detail = addressInfo.formatted_addresses.standard_address;
    formData.address.lat = addressInfo.location.lat;
    formData.address.lng = addressInfo.location.lng;

    // 更新地图中心
    map.setCenter(new (window as any).TMap.LatLng(lat, lng));
    // 隐藏加载提示
    // hideLoading();
  } catch (error) {
    console.error("地址解析失败:", error);
    // hideLoading();
    // showErrorToast('地址解析失败，请检查网络');
  }
}

// 清除所有标记
function clearMarkers() {
  // 清空标记数组
  markers = [];
  // 通过MultiMarker图层清除所有标记
  if (multiMarker) {
    multiMarker.setGeometries(markers);
  }
}

// 选择位置
const selectLocation = () => {
  // console.log(locationObj.value)
  // 当前位置
  formData.address.name = locationObj.value.address;
  formData.address.detail = locationObj.value.formatted_addresses.standard_address;
  formData.address.lat = locationObj.value.ad_info.location.lat;
  formData.address.lng = locationObj.value.ad_info.location.lng;

  initMap(locationObj.value.location.lat, locationObj.value.location.lng);

  Taro.showToast({
    title: "位置选择成功",
    icon: "success",
  });
};

/**
 * 处理支付方式确认
 * @param method 支付方式
 */
const handlePaymentConfirm = async (method: 'balance' | 'wechat') => {
  if (!currentTaskId.value) {
    Taro.showToast({
      title: "任务ID不存在",
      icon: "none",
    });
    return;
  }

  try {
    // 调用支付接口
    const payRes = await post("/pay/taskCheck", {
      amount: totalAmount.value,
      bid: currentTaskId.value,
      vipType: 1,
      deductionBalance: method === 'balance' ? 1 : 0, // 余额支付传1，微信支付传0
    });

    if (payRes.code == 0) {
      if (method === 'wechat') {
        // 微信支付
        doPay(payRes.data);
      } else {
        // 余额支付
        if (payRes.data.code == 2) {
          // 余额支付成功
          Taro.showToast({
            title: "支付成功！",
            icon: "success",
            duration: 2000,
          });
          // 更新用户余额
          const newBalance = (userStore.userInfo.balance || 0) - parseFloat(totalAmount.value);
          userStore.updateBalance(newBalance);
        } else {
          // 余额支付失败
          Taro.showToast({
            title: payRes.data.msg || "支付失败",
            icon: "error",
            duration: 2000,
          });
          return; // 支付失败，不继续执行后续逻辑
        }
      }
      
      Taro.showToast({
        title: `任务发布成功！总金额：¥${totalAmount.value}`,
        icon: "success",
        duration: 2000,
      });
      
      setTimeout(() => {
        Taro.navigateBack();
      }, 2000);
    } else {
      Taro.showToast({
        title: "支付失败",
        icon: "none",
      });
    }
  } catch (error) {
    console.error("支付失败:", error);
    Taro.showToast({
      title: "支付失败，请重试",
      icon: "none",
    });
  } finally {
    isSubmitting.value = false; // 重置loading状态
    currentTaskId.value = null; // 清空任务ID
  }
};

/**
 * 处理支付取消
 */
const handlePaymentCancel = () => {
  isSubmitting.value = false; // 重置loading状态
  currentTaskId.value = null; // 清空任务ID
  Taro.showToast({
    title: "已取消支付",
    icon: "none",
  });
};

// 支付发布任务费用（保留原函数用于兼容，已废弃）
// const payTask = async (id: number) => {
//   try {
//     const payRes = await post("/pay/taskCheck", {
//       amount: totalAmount.value,
//       bid: id,
//       vipType: 1,
//     });
//     if (payRes.code == 0) {
//       doPay(payRes.data);
//       Taro.showToast({
//         title: `任务发布成功！总金额：¥${totalAmount.value}`,
//         icon: "success",
//         duration: 3000,
//       });
//     } else {
//       Taro.showToast({
//         title: "支付失败",
//         icon: "none",
//       });
//     }
//   } catch (error) {
//     console.error("支付失败:", error);
//     Taro.showToast({
//       title: "支付失败，请重试",
//       icon: "none",
//     });
//   } finally {
//     isSubmitting.value = false; // 重置loading状态
//   }
// };

// 微信支付
const doPay = (param: any) => {
  (window as any).WeixinJSBridge.invoke(
    "getBrandWCPayRequest",
    {
      appId: param.appid, //公众号ID，由商户传入
      timeStamp: param.timeStamp, //时间戳，自1970年以来的秒数
      nonceStr: param.nonceStr, //随机串
      package: param.prepayId,
      signType: "RSA", //微信签名方式：
      paySign: param.paySign, //微信签名
    },
    function (param: any) {
      if (param.err_msg == "get_brand_wcpay_request:ok") {
        // 使用以上方式判断前端返回,微信团队郑重提示：
        //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠，商户需进一步调用后端查单确认支付结果。
        Taro.showToast({
          title: "购买成功！",
          icon: "success",
          duration: 2000,
        });
      } else {
        Taro.showToast({ title: "购买失败！", icon: "error", duration: 2000 });
      }
    }
  );
};

// 提交表单
const submitForm = async () => {
  if (isSubmitting.value) return; // 防止重复提交

  // 验证必填项
  if (!formData.title) {
    Taro.showToast({
      title: "请输入任务标题",
      icon: "none",
    });
    return;
  }

  if (!formData.startDate) {
    Taro.showToast({
      title: "请选择开始日期",
      icon: "none",
    });
    return;
  }

  if (!formData.startTime || !formData.endTime) {
    Taro.showToast({
      title: "请选择签到时间段",
      icon: "none",
    });
    return;
  }

  if (!formData.address.detail) {
    Taro.showToast({
      title: "请选择签到位置",
      icon: "none",
    });
    return;
  }

  if (!formData.amount) {
    Taro.showToast({
      title: "请输入任务金额",
      icon: "none",
    });
    return;
  }

  const taskAmount = parseFloat(formData.amount);
  if (taskAmount <= 0) {
    Taro.showToast({
      title: "请输入有效的任务金额",
      icon: "none",
    });
    return;
  }

  // 设置loading状态
  isSubmitting.value = true;

  try {
    const submitData = {
      title: formData.title,
      describe: formData.description,
      describe_str: formData.description,
      startdate: formData.startDate,
      enddate: formData.endDate,
      checktime: formData.startTime,
      deadline: formData.endTime,
      taskamount: formData.amount,
      longitude: formData.address.lng,
      latitude: formData.address.lat,
      checkrange: formData.address.range,
      fulladdress: formData.address.detail,
      check_range: formData.address.range,
      fee: fee.value,
      number: formData.number,
    };

    console.log("提交数据:", submitData, "区域选择:", regionLevel.value, "信息费:", fee.value, "范围类型:", rangeType.value);

    // 显示确认弹窗
    Taro.showModal({
      title: "确认发布",
      content: `任务标题：${formData.title}\n总金额：¥${totalAmount.value}`,
      success: async (res) => {
        if (res.confirm) {
          // API接口
          const res = await post("/check/add", submitData);
          console.log("==>", res);
          if (res.code == 0) {
            // 显示支付方式选择弹窗
            showPaymentModal.value = true;
            // 保存任务ID用于后续支付
            currentTaskId.value = res.data;
          } else {
            Taro.showToast({
              title: "发布失败",
              icon: "none",
            });
            isSubmitting.value = false;
          }
        } else {
          isSubmitting.value = false;
        }
      },
    });
  } catch (error) {
    console.error("发布任务失败:", error);
    Taro.showToast({
      title: "发布失败，请重试",
      icon: "none",
    });
    isSubmitting.value = false;
  }
};
</script>

<style lang="scss">
.pgs {
  .nut-cell-group__wrap {
    background: none !important;
    box-shadow: none !important;
  }

  .nut-input {
    border-radius: 16rpx;
    border: 1px solid #e5e7eb;
    transition: all 0.2s ease;

    &:focus {
      border-color: #3b82f6;
      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }
  }

  .nut-textarea {
    border-radius: 16rpx;
    border: 1px solid #e5e7eb;
    transition: all 0.2s ease;

    &:focus {
      border-color: #3b82f6;
      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }
  }

  .nut-button--primary {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    border: none;
    transition: all 0.2s ease;

    &:active {
      transform: translateY(1px);
      box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
    }
  }

  .nut-button--small {
    border-radius: 12rpx;
    font-weight: 500;
  }

  /* 区域选择组件样式，保持与输入框一致的边框风格 */
  :deep(.region-selector) {
    border: 1px solid #e5e7eb !important;
    border-radius: 16rpx !important;
    box-shadow: none !important;
    padding: 30rpx !important;
    margin-bottom: 40rpx;
    background-color: #ffffff;
  }
}
</style>
